<%--
  Created by IntelliJ IDEA.
  User: zhangyangyang
  Date: 2019/6/13
  Time: 10:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>测试ajax</title>



  </head>



  <body>


 <hr/>

 <button id="btn">测试JavaScript的ajax</button>


  <div id="boxs"> </div>

  </body>

  <script>

      function ajaxys(){
          debugger
          //1、 创建xhr对象
          var xhr = new XMLHttpRequest();//XMLHttpRequest()
          // 2、打开浏览器的连接
          var url = "http://localhost:8088/api/test";
          xhr.open('get',url,true);
          // 3、请求发送给服务器，对于get来说send里的参数为空或者null
          xhr.send();//或者xhr.send(null)
          // 4、判断服务器的状态，若准备就绪，就去获取数据
          xhr.onreadystatechange = function(){
              if (xhr.readyState == 4) {//证明服务器已经准备就绪
                  if (xhr.status == 200) {//页面请求成功
                      // var txt = xhr.responseText;//表示取出数据
                      document.getElementById('boxs').innerHTML = xhr.responseText;//表示取出数据,并把数据复制给boxs
                  }
              }
          }

      }
      //当点击btn按钮时触发对ajax的请求

      document.getElementById("btn").onclick= function () {
          ajaxys();//执行ajax的请求
      };


      /* $('#btn').click(function(){
           ajaxys();//执行ajax的请求
       });*/



      //原生js中写ajax的方法二：（利用回调函数callback）

      //先声明一个异步请求对象
      var xmlHttpReg = null;
      function ajax() {
          if (window.ActiveXObject) {//如果是IE
              xmlHttpReg = new ActiveXObject("Microsoft.XMLHTTP");
          } else if (window.XMLHttpRequest) {
              xmlHttpReg = new XMLHttpRequest(); //实例化一个xmlHttpReg
          }


          //如果实例化成功,就调用open()方法,就开始准备向服务器发送请求
          if (xmlHttpReg != null) {
              xmlHttpReg.open("get", "", true);
              xmlHttpReg.send();
              xmlHttpReg.onreadystatechange = doResult; //设置回调函数
          }
      }
      //设定函数doResult()，便于调用
      function doResult() {
          if (xmlHttpReg.readyState == 4 && xmlHttpReg.status == 200) {//4代表执行完成
              document.getElementById("content").innerHTML = xmlHttpReg.responseText;
          }
      }

  </script>


</html>
